<template>
  <div class="news">
    <el-backtop :visibility-height="100"></el-backtop>
    <el-row type="flex" class="row-title">
      <img src="@/assets/images/1.png" alt=""/>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="career-route">
        <el-breadcrumb-item class="career-title" :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/news' }">校园新闻</el-breadcrumb-item>
      </el-breadcrumb>
      <img src="@/assets/images/2.png" alt=""/>
    </el-row>
    <el-row class="news-container" v-show="news.length !== 0">
      <el-skeleton :loading="loading" animated>
        <template slot="template">
          <el-card class="news-card" v-for="o in 3" shadow="hover">
            <el-row type="flex" :gutter="20">
              <el-col :span="1.5">
                <el-skeleton-item variant="text" style="width: 350px;height: 210px"/>
              </el-col>
              <el-col style="display: flex;flex-flow: column;">
                <el-row class="news-info-title">
                  <el-skeleton-item variant="text" style="width: 540px;height: 60px"/>
                </el-row>
                <el-row style="height: 21px;margin-top: 12px">
                  <el-skeleton-item variant="text" style="width: 150px;height: 20px"/>
                </el-row>
                <el-row class="news-info-sub-title">
                  <el-skeleton-item variant="text" style="width: 540px;height: 70px"/>
                </el-row>
                <el-row style="height: 21px;margin-top: 12px">
                  <el-skeleton-item variant="text" style="width: 150px;height: 20px"/>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </template>
        <template>
          <el-card class="news-card" v-for="article in news" shadow="hover">
            <el-row type="flex" :gutter="20">
              <el-col :span="1.5">
                <el-image fit="cover" style="width: 350px;height: 210px" :src="server + article.title_picture"></el-image>
              </el-col>
              <el-col style="display: flex;flex-flow: column;">
                <el-row class="news-info-title">
                  <router-link class="link" :to="{name: 'NewsInfo', query: {id: article.id}}">{{ article.title }}</router-link>
                </el-row>
                <el-row style="height: 21px;margin-top: 12px">
                  <i class="el-icon-date"></i> {{ msToDate(article.issue_time).withoutTime }}
                </el-row>
                <el-row class="news-info-sub-title">
                  {{ article.sub_title }}
                </el-row>
                <el-row style="height: 21px;margin-top: 12px">
                  <i class="el-icon-mouse"></i>
                  <count-to :start-val="0" :end-val="article.read_num" :duration="2600" class="card-panel-num" />
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </template>
      </el-skeleton>
      <el-card class="page-card" shadow="hover">
        <el-pagination
            background
            :page-size="queryParams.size"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="news_total">
        </el-pagination>
      </el-card>
    </el-row>
    <el-empty v-if="news.length === 0" style="height: 600px" description="暂未发布校园新闻"></el-empty>
  </div>
</template>

<script>

import { mapGetters } from "vuex";
import CountTo from 'vue-count-to'
import { msToDate } from "@/utils/format";

export default {
  name: "News",
  data() {
    return {
      loading: false,
      server: window.application.minio_host,
      queryParams: {
        size: 3,
        currentPage: 1
      },
    }
  },
  components: {
    CountTo
  },
  mounted() {
    this.query()
  },
  computed: {
    ...mapGetters(['news', 'news_total'])
  },
  methods: {
    msToDate,
    query() {
      this.loading = true
      this.$store.dispatch("news/getNewsInfo", this.queryParams)
          .finally(() => {
            setTimeout(() => {
              this.loading = false
            },2000)
          })
    },
    handleCurrentChange(val) {
      this.queryParams.currentPage = val
      this.query()
    },
  }
}
</script>

<style scoped>

.news {
  //background: linear-gradient(to bottom, #dfeef1, 1%, white);
  background-color: #f1f1f1;
}

.row-title {
  height: 130px;
  background-color: #26b2b2;
  justify-content: space-evenly;
}

.career-route {
  line-height: 130px;
}

.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #fdfdfd !important;
}

::v-deep .el-breadcrumb__item {
  font-size: 20px;
}

.news-container {
  width: 960px;
  min-width: 960px;
  margin: 15px auto;
  min-height: 600px;
}

.news-card {
  border-radius: 15px;
  margin: 10px 0 15px;
}

.news-info-title {
  font-size: 22px;
  font-weight: 600;
  height: 60px;
}

.news-info-sub-title {
  font-size: 14px;
  color: #939393;
  height: 72px;
  margin-top: 12px;
}

.page-card {
  display: flex;
  align-content: center;
  justify-content: center;
  border-radius: 15px;
  margin-bottom: 15px;
}

.link {
  text-decoration: none;
  color: black;
}

.link:hover {
  color: #28b8b8;
}
</style>
